<template>
  <div class="zong">
    <div class="shuju">
      <span style="font-size: 20px">您已掌握内容</span>
      <div>
        <template>
          <el-table
              :data="tableData"
              style="width: 100%"
              height="300">
            <el-table-column
                label="日期"
                width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column
                label="能力"
                width="180">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>能力: {{ scope.row.name }}</p>
                  <p>掌握时间: {{ scope.row.date }}</p>
                  <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.name }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
                label="评分"
                width="180">
              <template slot-scope="scope">
                <el-rate
                    v-model=scope.row.pf
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}">
                </el-rate>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div id="echartsdemo" ref="container" style="border-bottom: #3a8ee6"></div>
      </div>


      <el-button type="primary" round style="margin-top: 20px">数据分析推荐工作</el-button>
    </div>
    <div class="job">
      <div class="xuanzeqi">
        <template>
          <span>工作方向:</span>
          <el-select v-model="value1" multiple placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <span>学历:</span>
          <el-select v-model="value2" clearable placeholder="请选择">
            <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </div>
      <div class="zhiye">

      </div>
    </div>
  </div>
</template>

<script>
import * as ec from "echarts";

export default {
  name: "job",
  mounted() {
    this.echartsinstance = ec.init(this.$refs.container)
    this.echartsinstance.setOption(this.option)
  },
  data() {
    return {
      option:{
        title: {
          text: 'Basic Radar Chart'
        },
        legend: {
          data: ['Allocated Budget', 'Actual Spending']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: 'Actual Spending'
              }
            ]
          }
        ]
      },
      options: [{
        value: '选项1',
        label: '保安'
      }, {
        value: '选项2',
        label: '保安'
      }, {
        value: '选项3',
        label: '保安'
      }, {
        value: '选项4',
        label: '保安'
      }, {
        value: '选项5',
        label: '保安'
      }],
      options2: [{
        value: '选项1',
        label: '保安'
      }, {
        value: '选项2',
        label: '保安'
      }, {
        value: '选项3',
        label: '保安'
      }, {
        value: '选项4',
        label: '保安'
      }, {
        value: '选项5',
        label: '保安'
      }],
      value1: [],
      value2: '',
      tableData: [{
        date: '2023-03-22',
        name: 'java后端开发',
        pf: 4.5,
      }, {
        date: '2023-03-22',
        name: 'java后端开发',
        pf: 4.5,
      }, {
        date: '2023-03-22',
        name: 'java后端开发',
        pf: 4.5,
      }, {
        date: '2023-03-22',
        name: 'java后端开发',
        pf: 4.5,
      }, {
        date: '2023-03-22',
        name: 'java后端开发',
        pf: 4.5,
      }, {
        date: '2023-03-22',
        name: 'java后端开发',
        pf: 4.5,
      }, {
        date: '2023-03-22',
        name: 'java后端开发',
        pf: 4.5,
      }, {
        date: '2023-03-22',
        name: 'java后端开发',
        pf: 4.5,
      }, {
        date: '2023-03-22',
        name: 'java后端开发',
        pf: 4.5,
      }]
    }
  }
}
</script>

<style scoped>
.zong {
  background-color: #8cc5ff;
  /*width: 1320px;*/
  height: 1000px;
  /*margin-left: 25%;*/
}

.shuju {
  text-align: center;
  background-color: #5daf34;
  width: 600px;
  height: 400px;
}

.job {
  /*width: 1320px;*/
  height: 500px;
  background-color: #0077aa;
}
</style>